Here are the instructions for adding a new Qt Quick top level game menu. Adding {\ttfamily \hyperlink{_controls_8qml}{Controls.qml}} menu is used as an example.

These instructions focus on features common on all menu views, not the features specific only to the Controls view.\hypertarget{add_game_menu_createNewMenuViewToQML}{}\section{Creating New Menu View}\label{add_game_menu_createNewMenuViewToQML}
First create a new QML file {\ttfamily \hyperlink{_controls_8qml}{Controls.qml}} for the menu view.

Next create an {\ttfamily Item} with id controlsView in the previously created QML \href{file:}{\tt file:} 
\begin{DoxyCode}
...
Item {
    id: controlsView

    signal back()

    property int marginsVertical: height/20
    property int headerHeight: marginsVertical*2
    property int marginsHorizontal: headerHeight+marginsVertical
...
\end{DoxyCode}
 This {\ttfamily Item} contains all the QML elements at Controls view.

There must be a {\ttfamily signal} {\ttfamily back()} in the {\ttfamily Item} for returning to the main view. Then the {\ttfamily properties} for vertical and horizontal margins and for the height of the header are needed.

Next add the background {\ttfamily Image} element: 
\begin{DoxyCode}
...
    Image {
        id: background
        anchors.fill: parent
        source: "qrc:/images/1024x512_01.jpg"
    }
...
\end{DoxyCode}
 The anchor {\ttfamily anchors.fill:} {\ttfamily parent} is used that background image fills the entire screen. Source {\ttfamily source:} {\ttfamily \char`\"{}qrc:/images/1024x512\_\-01.jpg\char`\"{}} for the image is get from the resources.

Then add a view header: 
\begin{DoxyCode}
...
    ViewHeader {
        id: controlsHeader
        heading: qsTr("CONTROLS")
    }
...
\end{DoxyCode}
 Source code for the {\ttfamily ViewHeader} element is in the {\ttfamily ViewHeader.qml} file.

Then for the actual content of the Controls view add a {\ttfamily Rectangle} element: 
\begin{DoxyCode}
...
    Rectangle {
        id: rectangleControlHelp

        width: parent.width
        anchors { left: parent.left; right: parent.right; leftMargin: marginsHori
      zontal; rightMargin: marginsHorizontal;
            top: controlsHeader.bottom; bottom: controlsFooter.top }
        color: "black"
        border { width: 5; color: "#333333" }
...
\end{DoxyCode}
 All the actual content for this specific view is shown inside this {\ttfamily Rectangle} element.

{\ttfamily Rectangle} has a black backgound and a border around it. It is anchored to the view {\ttfamily Item} but has margins so that the background {\ttfamily Image} is seen arond the {\ttfamily Rectangle}.

Then add the following code to the {\ttfamily Item} is {\ttfamily ViewFooter:} 
\begin{DoxyCode}
...
    ViewFooter {
        id: controlsFooter

        width: parent.width
        height: headerHeight

        onBackClicked: {
            soundEngine.playMenuSound();
            back();
            if (controlPages.currentPage != 1) {
                controlPages.currentPage = 1;
            }
        }
    } // controlsFooter
...
\end{DoxyCode}
 the source code for the footer is in the file {\ttfamily ViewFooter.qml}.

Footer contains the \char`\"{}Back\char`\"{} button. When the button is clicked, slot {\ttfamily onBackClicked} receives the signal from click. Then the slot {\ttfamily onBackClicked} emits a signal {\ttfamily back()} which goes back to the main view.

Finally add all the needed QML elements inside the previously created {\ttfamily Rectangle}.

Next edit the {\ttfamily \hyperlink{main_8qml}{main.qml}} file to be able to display the previously created view.\hypertarget{add_game_menu_createMainMenuImages}{}\section{Creating Main Menu Images}\label{add_game_menu_createMainMenuImages}
At first create new main menu images. There must be one image for main menu. Also new image for each menu selection must be created. The currently selected menu is highlighted at the menu selection images.

Main menu image {\ttfamily mainmenu.png} is at the project folder under {\ttfamily }./qml/smashminer/pics.

The new highlighted menu image {\ttfamily mainmenu\_\-controls\_\-selected.png} is copied also to folder {\ttfamily }./qml/smashminer/pics. Also the new menu images for old highlighted menus must be copied also to folder {\ttfamily }./qml/smashminer/pics.\hypertarget{add_game_menu_addMenuImageFileToResources}{}\section{Adding Menu Image File To Resources}\label{add_game_menu_addMenuImageFileToResources}
Next thing is to add a new highlighted menu image file to resources so that it can be referenced from the QML.

Edit the resource file {\ttfamily smashminer.qrc}. Add {\ttfamily mainmenu\_\-controls\_\-selected.png} file to the resources under {\ttfamily images} resource prefix.

Add alias {\ttfamily \char`\"{}mainmenu\_\-controls\_\-selected.png\char`\"{}} for the resource file.

Now the resource file can be referenced from the {\ttfamily \hyperlink{main_8qml}{main.qml}}.\hypertarget{add_game_menu_addNewMenuSelectionToQML}{}\section{Adding New Menu Item To QML Main Menu}\label{add_game_menu_addNewMenuSelectionToQML}
First the {\ttfamily numberOfMenuSelections} {\ttfamily property} must be increased under the {\ttfamily mainview} {\ttfamily Item:} 
\begin{DoxyCode}
...
property int numberOfMenuSelections: 6
...
\end{DoxyCode}
 The {\ttfamily numberOfMenuSelections} is used to calculate {\ttfamily menuMouseAreaHeight} {\ttfamily property}.

Next add the {\ttfamily MouseArea} for opening the {\ttfamily \hyperlink{_controls_8qml}{Controls.qml}} view when receiving {\ttfamily clicked()} {\ttfamily signal:} 
\begin{DoxyCode}
...
        MouseArea {
            id: mouseAreaControls
            anchors { top: mouseAreaSettings.bottom; topMargin: menuMouseAreaMarg
      in; bottomMargin: menuMouseAreaMargin}
            width: parent.width
            height: menuMouseAreaHeight
            onClicked: {
                showSubMenu("qrc:/images/mainmenu_controls_selected.png", control
      sView);
            }
        }
...
\end{DoxyCode}
 When mouse area is clicked the function {\ttfamily showSubMenu()} changes menu image to the highlighted version and displays the {\ttfamily controView}.

Next thing is to add actual {\ttfamily Controls} element: 
\begin{DoxyCode}
...
    Controls {
         id: controlsView
         x: -mainview.width
         onBack: {
            animBackFromMenu.start();
            animBackgroundFromMenu.start();
        }
    }
...
\end{DoxyCode}
 Id of the {\ttfamily Controls} element is {\ttfamily controlsView} which is used when referencing to it from javasript code.

Last thing is to add to {\ttfamily function} {\ttfamily hideSubMenus()} hiding of the {\ttfamily controlsView:} 
\begin{DoxyCode}
...
        controlsView.visible = false;
...
\end{DoxyCode}
 Now the Controls menu selection is working and the Controls view can be opened from the main menu. 